<template>
  <Layout>
    <Header>
      <Row>
        <Col span="16">
          <div class="demo-avatar">
            <Avatar shape="square" :src=imgs size="50" />
            <h3 style="color: white;display: inline-block">{{name}}</h3>
          </div>
        </Col>
        <Col span="8">
          <Breadcrumb>
            <BreadcrumbItem to="/">
              <Icon class="demo"  type="ios-home-outline"></Icon> <span class="demo">主页</span>
            </BreadcrumbItem>
            <BreadcrumbItem to="/">
              <Icon class="demo" type="logo-buffer"></Icon> <span class="demo">动态</span>
            </BreadcrumbItem>
            <BreadcrumbItem to="/">
              <Icon class="demo" type="ios-cafe"></Icon> <span class="demo">收藏</span>
            </BreadcrumbItem>
            <BreadcrumbItem to="/">
              <Icon class="demo" type="ios-cafe"></Icon> <span class="demo">设置</span>
            </BreadcrumbItem>
          </Breadcrumb>
        </Col>
      </Row>
    </Header>
    <Layout>
      <Content>
        <Divider/>
        <h2 style="margin-left: 10px">我的专栏</h2>
        <Divider/>
        <Row>
          <Col>
            <h2 style="margin-left: 10px">我的频道</h2>
          </Col>
        </Row>
        <Row type="flex" justify="center" align="bottom" style="height: 150px">
          <Col>
            <p>
              还没有视频.....
              <a href="">立即添加</a>
            </p>
          </Col>
        </Row>
        <Divider/>
        <h2 style="margin-left: 10px">我的收藏夹</h2>
        <Row style="margin: 30px;" type="flex" justify="center" align="center">
          <Col span="8">
            <Card style="width:320px">
              <div style="text-align:center">
                <img :src=cradImages[1]>
                <h3>A high quality UI Toolkit based on Vue.js</h3>
              </div>
            </Card>
          </Col>
          <Col span="8">
            <Card style="width:320px">
              <div style="text-align:center">
                <img :src=cradImages[0]>
                <h3>A high quality UI Toolkit based on Vue.js</h3>
              </div>
            </Card>
          </Col>
          <Col span="8">
            <Card style="width:320px">
              <div style="text-align:center">
                <img :src=cradImages[2]>
                <h3>A high quality UI Toolkit based on Vue.js</h3>
              </div>
            </Card>
          </Col>
        </Row>
        <Row style="margin: 30px;" type="flex" justify="center" align="center">
          <Col span="8">
            <Card style="width:320px">
              <div style="text-align:center">
                <img :src=cradImages[1]>
                <h3>A high quality UI Toolkit based on Vue.js</h3>
              </div>
            </Card>
          </Col>
          <Col span="8">
            <Card style="width:320px">
              <div style="text-align:center">
                <img :src=cradImages[0]>
                <h3>A high quality UI Toolkit based on Vue.js</h3>
              </div>
            </Card>
          </Col>
          <Col span="8">
            <Card style="width:320px">
              <div style="text-align:center">
                <img :src=cradImages[2]>
                <h3>A high quality UI Toolkit based on Vue.js</h3>
              </div>
            </Card>
          </Col>
        </Row>
        <Divider/>
      </Content>
      <Sider style="min-width: 350px">
        <Row style="min-height: 250px" >
          <Col span="24" type="flex" style="margin-top: 10px" justify="center" align="center">
            <h1>创作中心</h1>
            <Button><Icon type="logo-buffer" />视频投稿</Button>
            <Button><Icon type="md-browsers" />内容管理</Button>
          </Col>
          <Col style="margin-top: 10px" span="24">
            <img :src=cradImages[0] alt="">
          </Col>
        </Row>
        <Row style="min-height: 550px">
            <Row>
              <Col span="24">
                <h3 style="margin: 20px">公告</h3>
                <Divider/>
              </Col>
              <Col span="24">
                <Input v-model="ggao" type="textarea" :rows="20" placeholder="编辑我的空间公告..." />
              </Col>
            </Row>
        </Row>
      </Sider>
    </Layout>
  </Layout>
</template>
<script>
export default {
  data() {
    return {
      ggao:'',
      imgs:require('@assets/logo.png'),
      name:sessionStorage.getItem('name'),
      cradImages:[require('@assets/1.jpeg'),require('@assets/2.jpeg'),require('@assets/3.jpeg')]
    }
  },
  methods: {

  },
  components: {},
}
</script>
<style>
.demo {
  color: white;
}
div>img{
  width: 100%;
}
</style>
